<template>
  <div class="m-index">
    <el-tabs v-model="tabActive" type="card" class="tabList scrollBar" :style="{height:scrollHeight+'px'}">
      <el-tab-pane label="" name="followup">
        <router-link :to="{name:'Index',query:{page:'followup'}}" slot="label">我的跟进项</router-link>
        <div class="layout-2">
          <The-My-Follow-Up ref="refFollwoUp" :nowTab="tabActive"></The-My-Follow-Up>
        </div>
      </el-tab-pane>
      <el-tab-pane name="notice">
        <router-link :to="{name:'Index',query:{page:'notice'}}" slot="label">我的消息 <span
          class="msg-badge"
          v-if="noticeNum>0">{{noticeNum}}</span>
        </router-link>
        <div class="layout-2">
          <The-My-Notice ref="refNotice" @noticeNum="fnNoticeNum" :nowTab="tabActive"></The-My-Notice>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的LEADS" name="leads">
        <router-link :to="{name:'Index',query:{page:'leads'}}" slot="label">我的LEADS</router-link>
        <The-My-Leads ref="refLeads" :nowTab="tabActive"></The-My-Leads>
      </el-tab-pane>
      <el-tab-pane label="我的真实账号" name="account">
        <router-link :to="{name:'Index',query:{page:'account'}}" slot="label">我的真实账号</router-link>
        <The-My-Account ref="refAccount" :nowTab="tabActive"></The-My-Account>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import TheMyAccount from './components/TheMyAccount.vue'
  import TheMyLeads from './components/TheMyLeads.vue'
  import TheMyNotice from './components/TheMyNotice.vue'
  import TheMyFollowUp from './components/TheMyFollowUp.vue'
  export default {
    name: 'Index',
    data () {
      return {
        pages: ['followup', 'notice', 'leads', 'account'],
        scrollHeight: 0,
        noticeNum: '0'
      }
    },
    components: {
      TheMyAccount,
      TheMyLeads,
      TheMyNotice,
      TheMyFollowUp,
    },
    methods: {
      fnNoticeNum(num) {
        this.noticeNum = num
      },
    },
    activated(){
     this.$refs.refFollwoUp.doLayoutTable();
    },
    computed: {
      tabActive: {
        get(){
          if (this.pages.indexOf(this.$route.query.page) >= 0) {
            return this.$route.query.page;
          } else {
            return 'followup'
          }
        },
        set(){}

      }
    },
    watch: {
      '$route'(to) {
        if (to.name == 'Index' && to.query.t) {
          this.$refs.refFollwoUp.resetView();
          this.$refs.refNotice.resetView();
          this.$refs.refLeads.resetView();
          this.$refs.refAccount.resetView();
        }
      }
    },
    mounted(){
      this.scrollHeight = document.body.offsetHeight - 100;
    }
  }
</script>

<style scoped lang="scss">
  @import "../../scss/variables";

  .m-index {
    .tabList {
      border-top: solid 1px $--border-color-base;
      display: flex;
      flex-direction: column;
      .is-active {
        a {
          color: $--color-primary
        }
      }
      a {
        display: inline-block;
        text-decoration: none;
        color: $--tab-header-color;
        &:hover {
          color: $--color-primary;
        }
      }
    }

    .layout-2 {
      background: #fff;
    }
    .msg-badge {
      position: absolute;
      right: 4px;
      top: 18px;
      height: 14px;
      line-height: 14px;
      border-radius: 7px;
      background-color: $bg_A;
      color: #fff;
      padding: 0 4px;
      font-size: $--font-size-small;
    }
  }
</style>
